<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: auto;">
       <el-card>
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="仓库">
      <el-input style="width: 150px;" v-model="formInline.warehousecode" placeholder="请输入仓库名称/编号" clearable />
    </el-form-item>
    <el-form-item label="仓库状态">
      <el-select
        v-model="formInline.warehousestate"
        placeholder="请选择"
        clearable
        style="width: 150px;"
      >
        <el-option label="启用" :value="1" />
        <el-option label="停用" :value="2" />
        <el-option label="已锁定" :value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="仓库部门">
      <el-input style="width: 150px;" v-model="formInline.organizationid" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="仓库主管">
      <el-input style="width: 150px;" v-model="formInline.userid" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="show">查询</el-button>
    </el-form-item>
  </el-form>
       </el-card>
      </el-header>
      <el-main>
        <el-card style="height: auto;">
          <el-button type="success" size="small" @click="handleClick">新增</el-button>
          <el-button size="small" @click="delall">删除</el-button>
          <el-button size="small" @click="stateall(1,false)">启用</el-button>
          <el-button size="small" @click="stateall(2,null)">停用</el-button>
          <el-button size="small" @click="stateall(null,true)">锁定</el-button>
           <el-table
    ref="multipleTableRef"
    :data="tableData"
    row-key="warehouseId"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
  >
    <el-table-column type="selection" :selectable="selectable" min-width="55" />
    <el-table-column type="index" label="序号" min-width="90" />
    <el-table-column prop="warehouseCode" label="仓库编号" min-width="120">
      <template #default="spoce">
        <a @click="detail(spoce.row.warehouseId)">{{ spoce.row.warehouseCode }}</a>
      </template>
    </el-table-column>
    <el-table-column prop="warehouseName" label="仓库名称" min-width="120" />
    <el-table-column prop="warehouseCapacity" label="仓库容量/m³" min-width="120" />
    <el-table-column prop="warehouseAddress" label="仓库地址" min-width="150" />
    <el-table-column prop="organizationName" label="库管部门" min-width="120" />
    <el-table-column prop="userName" label="仓库主管" min-width="120" />
    <el-table-column prop="warehouseState" label="仓库状态" min-width="120">
      <template #default="spoce">
        <el-tag type="success" v-if="spoce.row.warehouseState==1&&spoce.row.warehouseLock==false">启用</el-tag>
        <el-tag type="danger" v-if="spoce.row.warehouseState==2">停用</el-tag>
        <el-tag v-if="spoce.row.warehouseLock==true&&spoce.row.warehouseState==1">已锁定</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="accountName" label="操作人" min-width="120" />
    <el-table-column prop="accountDate" label="操作时间" min-width="150">
      <template #default="spoce">
        {{ moment(spoce.row.accountDate).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="160">
      <template #default="spoce">
        <el-button link type="primary" size="small" @click="handleEdit(spoce.row.warehouseId)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="del(spoce.row.warehouseId)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
        </el-card>
       <el-card>
        <table>
          <tbody>
            <th>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot"
      :total="page.listCount"
    >
    <template #default="spoce">
        共{{ page.listCount }}条,每页{{ page.pagesize }}条,当前第{{ page.pageindex }}/{{ page.pageCount }}页
      </template>
                </el-pagination>
              </td>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.listCount"
    >
    <template #default="spoce">
        <el-button link type="primary" size="small" @click="page.pageindex=1">
          首页
        </el-button>
      </template>
                </el-pagination>
              </td>
              <td>
                <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot, sizes, jumper"
      :total="page.listCount"
    >
    <template #default="spoce">
      <el-button link type="primary" size="small" @click="page.pageindex=page.pageCount">
          尾页
        </el-button>
      </template>
                </el-pagination>
              </td>
            </th>
          </tbody>
        </table>
       </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, type TableInstance,ElMessageBox } from 'element-plus'
import  myaxios  from "@/http/MyAxios";
import moment from 'moment';
import router from '@/router';
onMounted(()=>
{
  show();
})
//查询条件
const formInline = reactive({
  warehousecode: '',
  warehousestate: '',
  organizationid: '',
  userid: '',
  maxcapacity: '',
  minapacity: '',
  maxstoragelocationnum: '',
  minstoragelocationnum: '',
  warehouseaddress: '',
  accountname: '',
  beingaccountdate: '',
  endaccountdate: '',
})
//分页条件
const page=reactive({
  pageindex:1,
  pagesize:10,
  listCount:0,
  pageCount:0
})
watch(page,()=>
{
  show();
})
//显示仓库
const show=()=>
{
  myaxios.get("/api/Warehouse/GetWarehouse",{params:{
    warehousecode:formInline.warehousecode,
    warehousestate:formInline.warehousestate,
    organizationid:formInline.organizationid,
    userid:formInline.userid,
    maxcapacity:formInline.maxcapacity,
    minapacity:formInline.minapacity,
    maxstoragelocationnum:formInline.maxstoragelocationnum,
    minstoragelocationnum:formInline.minstoragelocationnum,
    warehouseaddress:formInline.warehouseaddress,
    accountname:formInline.accountname,
    beingaccountdate:formInline.beingaccountdate,
    endaccountdate:formInline.endaccountdate,
    pageindex:page.pageindex,
    pagesize:page.pagesize,

  }})
  .then(res=>
  {
    tableData.value=res.data.data.data;
    page.listCount=res.data.data.listCount;
    page.pageCount=res.data.data.pageCount;
  }
  )
}
const tableData = ref([]);
//新增
const handleClick = () => {
  router.push("/CreateWarehouse")
}
//编辑
const handleEdit = (id: any) => {
  router.push({
    path: "/UpdateWarehouse",
    query: {
      warehouseId: id
    }
  })
}
//详情
const detail=(warehouseId:any)=>
{
  router.push({
    path:"/DetailWarehouse",
    query:{
      warehouseId:warehouseId
    }
  })
}

//删除
const del=(id:any)=>
{
   ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      myaxios.put("/api/Warehouse/DeleteWarehouse?warehouseId="+id)
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
  
}
//批量删除
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])
const selectable = (row: any) => ![1, 2].includes(row.id)

const delall=()=>
{
  if(multipleSelection.value.length==0)
{
  ElMessage.error("至少选择删除一项");
  return;
}
   ElMessageBox.confirm(
    '确认删除'+multipleSelection.value.length+'条数据吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      myaxios.put("/api/Warehouse/AllDeleteWarehouse?warehouseIds="+multipleSelection.value.map((item:any)=>item.warehouseId))
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
  
}
//批量修改状态

const stateall=(state:any,locks:any)=>
{
  if(multipleSelection.value.length==0)
{
  ElMessage.error("至少选择修改一项");
  return;
}

   ElMessageBox.confirm(
    '确认修改'+multipleSelection.value.length+'条数据吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      if(state==null)
    {
      myaxios.put(`/api/Warehouse/AllUpdateStateWarehouse?warehouseIds=${multipleSelection.value.map((item:any)=>item.warehouseId)}&locks=${locks}`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
        myaxios.put(`/api/Warehouse/AllUpdateStateWarehouse?warehouseIds=${multipleSelection.value.map((item:any)=>item.warehouseId)}&state=1`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    }
      else if(state!=null&&locks==null)
    {
      myaxios.put(`/api/Warehouse/AllUpdateStateWarehouse?warehouseIds=${multipleSelection.value.map((item:any)=>item.warehouseId)}&state=${state}`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    }
    else
    {
      myaxios.put(`/api/Warehouse/AllUpdateStateWarehouse?warehouseIds=${multipleSelection.value.map((item:any)=>item.warehouseId)}&locks=${locks}`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
        myaxios.put(`/api/Warehouse/AllUpdateStateWarehouse?warehouseIds=${multipleSelection.value.map((item:any)=>item.warehouseId)}&state=${state}`)
  .then(res=>
        {
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            show();
        }
        else
        {
            ElMessage.success(res.data.message);
        }
        })
    }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
  
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

</style>
